$useTabsOnPDP: false !default;

%pdpTabs {
  // On small devices we hide the toggled items
  // in order to allow for a more condensed layout
  @include media-breakpoint-down(sm) {
    > div.active.toggled {
      display: none;
    }
    > h3.active.toggled {
      color: initial;
      &:before {
        content: '+';
      }
      &:after {
        width: 0;
        opacity: var(--cx-opacity, 0);
      }
    }
  }

  > div {
    background: var(--cx-background-color, var(--cx--g-color-background));
    &:not(.active) {
      display: none;
    }
    .container > h2 {
      display: none;
    }
  }
  > h3 {
    margin-bottom: 0;
    &.active,
    &:hover {
      color: var(--cx-color, var(--cx-g-color-primary));
    }
    cursor: pointer;
    @include media-breakpoint-up(md) {
      &.active {
        cursor: initial;
      }
    }

    // border effect
    &:after {
      content: '';
      display: block;
      margin: 15px auto auto auto;
      height: var(--cx-height, 5px);
      background: var(--cx-color, var(--cx-g-color-primary));

      // the tab hover effect uses a border in the :after pseudo
      // that is animated from 0% to 100% width
      width: 0;
      opacity: var(--cx-opacity, 0);
      transition: all var(--cx-g-transition-duration, 0.6s);
    }

    &.active:after,
    &:hover:after {
      width: 100%;
    }
    &.active:after,
    &.active:hover:after {
      opacity: var(--cx-opacity, 1);
    }
    &:not(.active):hover:after {
      opacity: var(--cx-opacity, 0.5);
    }
  }

  @include media-breakpoint-down(sm) {
    > h3 {
      text-indent: 20px;
      border-top: var(--cx-border-width, 1px)
        var(--cx-border-color, var(--cx-g-color-light))
        var(--cx-border-style, solid);
      font-size: 18px;
      padding: 15px 0 0 0;
      &:before {
        content: '+';
        margin: 5px 15px;
        float: right;
        font-size: 33px;
        bottom: 12px;
        position: relative;
        color: var(--cx-color, var(--cx-g-color-text));
      }
      &.active {
        &:before {
          content: '–';
        }
      }
    }
    > div {
      padding: 15px 5px;
    }
  }

  // in order to align the tabs to the left
  // we simulate the container size
  @include media-breakpoint-only(md) {
    grid-template-columns: auto 10px repeat(4, 180px) 0px auto;
  }
  @include media-breakpoint-only(lg) {
    grid-template-columns: auto 10px repeat(4, 180px) 272px auto;
  }
  @include media-breakpoint-only(xl) {
    grid-template-columns: auto 10px repeat(4, 180px) 420px auto;
  }

  @include media-breakpoint-up(md) {
    display: grid;

    > h3 {
      order: 0;
      transition: all 0.6s;
      font-size: 1.2rem;
      text-align: center;
      margin: 0;

      &:first-of-type {
        grid-column: 3;
      }
    }

    // the div elements contain the content and will be rendered after the tabs
    > div {
      order: 2;
      grid-column-start: 1;
      grid-column-end: -1;
      padding: 50px 0;
      border-top: var(--cx-border-width, 1px)
        var(--cx-border-color, var(--cx-g-color-light))
        var(--cx-border-style, solid);
    }
  }
}

%pdpFlat {
  margin: auto;

  @include media-breakpoint-down(xl) {
    max-width: 1140px;
  }
  // make a small header with links
  display: grid;
  grid-template-columns: repeat(4, auto) auto;
  justify-content: start;
  > h3 {
    order: 2;

    color: var(--cx-g-color-primary);
    font-weight: normal;
    font-size: 0.9em;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
    margin: 10px 15px;
  }
  > div {
    order: 4;
    grid-column: 1 / span 5;
  }
}

cx-product-details {
  .details {
    @if $useTabsOnPDP == true {
      @extend %pdpTabs !optional;
    } @else {
      @extend %pdpFlat !optional;
    }
  }
}
